import { FC, useEffect, useState } from 'react';
import { Form, Input, Button , Table ,Pagination} from 'antd';
import type { TableRowSelection } from 'antd/lib/table/interface';
import "../../static/css/reviewer/revLog.css"
import { revLog } from '../../apis/reviewer'

interface Iparams{
  page:number,
  pageSize:number
}

const RevLog: FC<any> = (props: any): JSX.Element => {
  const [params,setParams] = useState<Iparams>({
    page:1,
    pageSize:10
  });
  // 列表请求接口渲染
  const [list,setList] = useState<any>([])

  const revDate = async () => {
    const res:any = await revLog(params)
    console.log(res);
    if(res.code=='00000'){
      setList(res.data.data)
      setPagination({...pagination,total:res.data.total})
    }
  }


  // 查询
  const onSearch = (e: any) => {
    console.log(e);
    setParams({ ...params, page: 1, ...e })
  };

  // 分页
  const [pagination,setPagination] = useState({current:1,pageSize:10,total:0})
  const pageChange=(page:number,pageSize:number)=>{
    setPagination({...pagination,current:page,pageSize})
    setParams({...params,page})
  }

  // 复选框
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<any> = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
    ],
  };

  // 表格
  const columns = [
    {
      title: 'Id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '访客人姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '核销人姓名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '核销时间',
      dataIndex: 'addtime',
      key: 'addtime',
    },
  ];

  useEffect(() => {
    revDate()
  }, [params])

  return (
    <div>
      <div className="nav">
        <Form
          layout="inline"
          onFinish={onSearch}>
          <Form.Item name="idorname">
            <Input className="inp" placeholder="请输入核检人姓名" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" size="middle" htmlType="submit">查询</Button>
          </Form.Item>
        </Form>
      </div>
      <Table
        dataSource={list}
        rowKey='id'
        rowSelection={rowSelection}
        columns={columns}
        pagination={false}
      />
      <div className="page">
        <Pagination {...pagination} onChange={pageChange} />
      </div>
    </div>
  )
}
export default RevLog;